<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数解决的一些问题</title>
</head>
<body>
    <button>hello, javascript</button>
    <button>hello, vue js</button>
</body>
<script type="text/javascript">
    // let lessons = {
//     site: 'www.google.com',
//     lists: ['vue', 'react', 'angular'],
//     show: function(){
//        return this.lists.map(l => {  
//           //舒服了剪头函数没有自己的this，会沿着作用域链向上查找
//           return `${this.site}---${l}`;
//        });
//     }
// }


// console.log(lessons.show());


//但注意在dom操作中，箭头函数形式回调可能会带来意想不到的结果

let Dom = {
    site: 'www.panyue.com',
    // handleEvent: function(e){
    //     console.log(`${this.site} --- ${event.target.innerHTML}`); 
    // },
    bind: function(){
        //this === Dom元素
       const btns = document.querySelectorAll('button');
       //#region
    //    btn.addEventListener('click',this);
    //    btn.addEventListener('click',(event) => {
    //        //非箭头函数形式this === button
    //       //console.log(this); 
    //       //箭头函数this就是Dom对象
    //     //   console.log(this);
    //       console.log(event.target); //event.target代表触发事件的元素这里是button
    //       console.log(`${this.site} --- ${event.target.innerHTML}`);
    //    });
    //#endregion
       const self = this;
       //#region 
       // btns.forEach(function(e){
    //        console.log(this); //注意这里的this又丢了，因为它是普通函数它的上下文是window，保留这个this的方法要么改成箭头函数要么使用作用域链
    //        e.addEventListener("click", function(){
    //             //this === e;
    //             console.log(`${self.site} --- ${this.innerHTML}`);
    //        });
    //    })  
       //#endregion
       ///或者
       btns.forEach(b => {
           b.addEventListener("click", (event) => {
               console.log(`${this.site} --- ${event.target.innerHTML}`);
           })
       })
    }
}

Dom.bind();
</script>
</html>